<template>
  <div class="container">
    <div style="padding:.15rem;flex:1;overflow:auto">
      <div class="item">
        <h1 class="label">商品头像</h1>
        <div class="upload-headimg">
          点击上传
          <img :src="form.avatar" alt id="headImg" />
          <input
            type="file"
            class="uploadHeadImg"
            @change="handleHeadImgChange"
          />
        </div>
      </div>
      <div class="item">
        <h1 class="label">商品名称</h1>
        <div>
          <yd-input
            class="input"
            :max="20"
            v-model="form.name"
            placeholder="请输入店铺名称"
          />
        </div>
      </div>
      <!-- <div class="item">
        <h1 class="label">商品好评率</h1>
        <div>
          <yd-input class="input" value="20%" disabled />
          <p style="color:#757575;padding-left:.15rem">商品好评率不可修改。</p>
        </div>
      </div> -->
      <!-- <div class="item">
        <h1 class="label">商品类型</h1>
        <div>
          <select
            style="width:100%;border:none;border-bottom:1px solid #ddd!important;height:1rem;"
            v-model="form.goodsTypes"
          >
            <option value="1">小吃</option>
            <option value="2">海鲜</option>
            <option value="3">炒菜</option>
            <option value="4">海底捞</option>
            <option value="1">海鲜</option>
            <option value="2">小吃</option>
            <option value="3">炒菜</option>
            <option value="4">海底捞</option>
          </select>
        </div>
      </div> -->
      <div class="item">
        <h1 class="label">单价</h1>
        <div>
          <yd-input
            class="input"
            :max="20"
            v-model="form.price"
            placeholder="请输入单价"
          />
        </div>
      </div>
      <!-- <div class="item">
        <h1 class="label">单价</h1>
        <div>
          <yd-input
            class="input"
            :max="20"
            v-model="form.w_price"
            placeholder="请输入单价"
          />
        </div>
      </div> -->
      <div class="item">
        <h1 class="label">折扣</h1>
        <div>
          <!-- <select
            style="width:100%;border:none;border-bottom:1px solid #ddd!important;height:1rem;"
            v-model="form.cutType"
          >
            <option value="0">无折扣</option>
            <option value="1">折扣一</option>
            <option value="2">折扣二</option>
          </select> -->
          <yd-input
            class="input"
            type="number"
            :max="10"
            v-model="form.cut"
            placeholder="请输入折扣，0 - 1之间"
          />
        </div>
      </div>

      <!-- <div class="item">
        <h1 class="label">商品照片</h1>
        <div class="photos">
          <img
            v-for="(item, index) in imgs"
            :src="item"
            :key="index"
            alt
            @click="() => delImg(index)"
          />
        </div>
        <div style="margin:.15rem 0">
          <div class="upload-photo">
            点击上传
            <input
              type="file"
              v-if="imgs.length < 10"
              @change="handleImgsChange"
            />
          </div>
        </div>
        <div style="color:#757575">请上传商品照片,最多10张。</div>
        <div style="color:#757575">点击已上传图片可删除。</div>
      </div> -->
      <!-- <div class="item">
        <h1 class="label">描述</h1>
        <div>
          <yd-textarea
            v-model="form.desc"
            placeholder="请输入商品描述,最多100字"
            maxlength="100"
            style="margin-top:.15rem;padding:.15rem;
          border-radius:.15rem"
          ></yd-textarea>
        </div>
      </div> -->
      <yd-button size="large" type="primary" @click.native="save" class="btn">
        保 存
      </yd-button>
    </div>
  </div>
</template>
<script>
import { addGoods, updateGoods } from '@/api';
export default {
  name: 'goodsDetail',
  data() {
    return {
      imgs: [],
      form: {
        name: '',
        // desc: '',
        avatar: '',
        // photos: [],
        // goodsTypes: '1',
        // cutType: '0',
        price: '',
        // w_price: ''
        cut: ''
      }
    };
  },
  mounted() {
    this.getData();
  },
  computed: {
    goodsId() {
      return this.$route.query.id;
    }
  },
  methods: {
    getData() {
      if (this.goodsId) {
        console.log(this.goodsId);
        //获取这个商品的信息并赋给this.form
      }
    },
    delImg(index) {
      this.imgs.splice(index, 1);
    },
    handleHeadImgChange(e) {
      const file = e.target.files[0];
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = e => {
        let base64 = e.currentTarget.result;
        document.getElementById('headImg').src = base64;
        this.form.avatar = base64;
      };
    },
    handleImgsChange(e) {
      const file = e.target.files[0];
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = e => {
        let base64 = e.currentTarget.result;
        this.imgs.push(base64);
      };
    },
    save() {
      const {
        name,
        // desc,
        price,
        // w_price,
        // cutType,
        avatar,
        // photos,
        // goodsTypes
        cut
      } = this.form;
      const hasError = (() => {
        switch (true) {
          case !avatar:
            return '请上传商品头像';
          case !name:
            return '请输入商品名称';
          case !price:
            return '请输入正确的单价';
          case !cut || cut > 1 || cut <= 0:
            return '请输入正确的折扣';
          default:
            return false;
        }
      })();
      if (hasError === false) {
        if (!this.goodsId) {
          addGoods({
            dishes: {
              dishesName: name,
              dishesImage: avatar,
              dishesPrice: price,
              discount: cut,
              bussinesId: 28
            }
          }).then(res => {
            console.log(res);
            if (res.success) {
              this.$dialog.toast({
                mes: '添加商品成功',
                type: 'success',
                timeout: 800
              });
              this.$router.back();
            } else {
              this.$dialog.toast({
                mes: res.msg,
                type: 'error',
                timeout: 800
              });
            }
          });
        } else {
          this.$dialog.toast({
            mes: '发送修改的请求',
            type: 'success',
            timeout: 800
          });
        }
      } else {
        this.$dialog.toast({
          mes: hasError,
          type: 'error',
          timeout: 800
        });
      }
    }
  }
};
</script>
<style scoped lang="less">
.container {
  height: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  background: #f6f6f6;
}
.upload-headimg {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #eaeaea;
  justify-content: center;
  align-items: center;
  display: flex;
  margin-top: 0.2rem;
  position: relative;
  overflow: hidden;

  #headImg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .uploadHeadImg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
.label {
  font-size: 0.3rem;
  font-weight: 500;
}

.item {
  margin: 0.15rem 0 0.3rem;
}

.upload-photo {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px dotted #ccc;
  border-radius: 0.15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;

  input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}

.time-picker {
  display: flex;
  align-items: center;
  height: 0.7rem;
  margin-top: 0.2rem;

  & > div {
    display: flex;
    width: 50%;
    white-space: nowrap;
    align-items: center;
  }

  .time {
    font-size: 0.4rem;
  }
}

.photos {
  display: flex;
  flex-wrap: wrap;

  img {
    width: 32%;
    max-height: 2rem;
    margin: 0.65%;
  }
}

/deep/.input {
  border-bottom: 1px solid #ddd;
  height: 0.8rem;
  margin: 0.1rem 0;
  padding: 0 0.15rem;

  input {
    color: #333;
    letter-spacing: 0.5px;
  }
}
.avatar {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 0.05rem solid #fff;
  margin-right: 0.3rem;
}

.userInfo {
  text-align: left;
  display: flex;
  align-items: center;
  font-size: 0.34rem;
}

.line {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: 0.2rem 0;
}

.box {
  background-color: #eee;
  border-radius: 0.05rem;
  padding: 0.5rem;
}
</style>
